<template>
	<main-container v-loading="state.loading">
		<el-tabs v-model="state.active" class="demo-tabs">
			<!-- <el-tab-pane label="全店风格" name="1"></el-tab-pane> -->
			<el-tab-pane label="底部导航" name="2"></el-tab-pane>
		</el-tabs>
		<div class="theme-flex" v-if="state.active == '1'">
			<div>
				<div
					v-for="(item, index) in themeList"
					:key="index"
					class="ns-exchange-type"
					:class="{ 'ns-exchange-typ-selected': item.themeColor == state.mobiletheme.themeColor }"
				>
					<div class="ns-exchange-list" @click="clickTheme(item)">
						<div class="ns-exchange-color">
							<div :class="'bg-' + item.themeColor" class="theme-color"></div>
							<div :class="'bg-' + item.matchColor" class="theme-color"></div>
							<div style="background-color: #fff" class="theme-color"></div>
						</div>
						<div>{{ item.name }}</div>
					</div>
				</div>
			</div>
		</div>
		<div v-if="state.active == '2'">
			<el-row>
				<el-col :span="10" style="margin-top: 20px">
					<el-form :model="state.mobiletheme" label-width="140px">
						<el-form-item label="tabBar文字默认颜色">
							<el-input v-model="state.mobiletheme.tabbarColor" clearable>
								<template #append>
									<el-color-picker v-model="state.mobiletheme.tabbarColor" :predefine="predefineColors" />
								</template>
							</el-input>
						</el-form-item>
						<el-form-item label="tabBar文字选中颜色">
							<el-input v-model="state.mobiletheme.tabbarSelectedColor" clearable>
								<template #append>
									<el-color-picker v-model="state.mobiletheme.tabbarSelectedColor" :predefine="predefineColors" />
								</template>
							</el-input>
						</el-form-item>
						<el-form-item label="tabBar上边框颜色">
							<el-select v-model="state.mobiletheme.tabbarBorderStyle" style="width: 100%" clearable>
								<el-option label="黑色" value="black" />
								<el-option label="白色" value="white" />
							</el-select>
						</el-form-item>
						<el-form-item label="tabBar背景颜色">
							<el-input v-model="state.mobiletheme.tabbarBgColor" clearable>
								<template #append>
									<el-color-picker v-model="state.mobiletheme.tabbarBgColor" :predefine="predefineColors" />
								</template>
							</el-input>
						</el-form-item>
					</el-form>
				</el-col>
				<el-col :span="14">
					<div>
						<div
							:style="{ backgroundColor: state.mobiletheme.tabbarBgColor }"
							class="tabbar-demo"
							v-for="(tabar, tabarIndex) in tabbarItems"
							:key="tabarIndex"
							@mouseover="state.hoverTabbarIndex = tabar.id"
							@mouseleave="state.hoverTabbarIndex = -1"
							:class="[{ 'hover-tabbar-demo': tabar.id == state.hoverTabbarIndex }, { 'selected-tabbar-demo': state.selectedTabbarId == tabar.id }]"
							@click="selectedTabbar(tabar)"
						>
							<div class="item" v-for="(item, index) in tabar.info" :key="index">
								<div>
									<img style="width: 30px" :src="getAssetsFile('tabbar/' + item.iconPath)" />
									<img style="width: 30px" :src="getAssetsFile('tabbar/' + item.selectedIconPath)" />
								</div>
								<div>{{ item.text }}</div>
							</div>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
		<div class="bottom-button">
			<el-button type="primary" @click="doEdit" style="width: 20%">保 存</el-button>
		</div>
	</main-container>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { getList, editObj } from '/@/api/shop/mobiletheme';
import { tabbarItems } from './tabbar';
import { themeList } from './theme';
import { ElMessage } from 'element-plus';
import { getAssetsFile } from '/@/utils/util';
const state = reactive({
	loading: false,
	themeList: themeList,
	tabbarItems: tabbarItems,
	mobiletheme: {
		id: '',
		matchColor: '#fe496e',
		themeColor: '#fe496e',
		bottomColor: '#ffffff',
		tabbarColor: '',
		tabbarSelectedColor: '',
		tabbarBorderStyle: '',
		tabbarBgColor: '',
		isUse: '',
		tabbarItem: {},
	},
	active: '2',
	hoverTabbarIndex: -1,
	id: '',
	selectedTabbarId: null,
});

const predefineColors = ref(['#fe496e', '#13d694', '#bb9c62', '#f9002c', '#1c73f0']);
/**
 * 查询全部主题
 */
const initPage = async () => {
	state.loading = true;
	await getList()
		.then((response) => {
			let theme = response.data.data[0];
			if (theme) {
				state.mobiletheme = theme;
				state.id = theme.id;
				state.selectedTabbarId = theme.tabbarItem.id;
			}

			state.loading = false;
		})
		.catch(() => {
			state.loading = false;
		});
};
/**
 * 选择主题
 */
const clickTheme = (row: any) => {
	state.mobiletheme = row;
};
/**
 * 修改主题
 */
const doEdit = () => {
	state.loading = true;
	state.mobiletheme.isUse = '1';
	state.mobiletheme.id = state.id;
	editObj(state.mobiletheme)
		.then((response) => {
			ElMessage.success('保存成功');
			state.loading = false;
		})
		.catch(() => {
			state.loading = false;
		});
};
/**
 * 选中tabbar样式
 */
const selectedTabbar = (row: any) => {
	state.selectedTabbarId = row.id;
	state.mobiletheme.tabbarItem = row;
};
initPage();
</script>

<style scoped lang="scss">
@import './index.scss';
</style>
